Scroll en cualquier parte

Hace tiempo que aprendimos a añadir scroll en diferentes partes de nuestro blog, pero siempre se pasa algo por alto, y por suerte siempre hay alguien que se da cuenta como es el caso de koba que pregunta la forma de añadirlo a las entradas pero sin que aparezca el título.

Para añadir un scroll vamos a hacerlo añadiendo unas líneas a las CSS, o a los CSS (póngase el artículo que más les guste) para ser más concretos lo añadiremos justo antes de ]]></b:skin&gt; estas serían:

#scroll {
width:400px;
height:200px;
background-color:#333333;
overflow:auto;
}


Con overflow: auto sólo aparecerán las barras del scroll en caso de que el contenido sea mayor a las medidas que se añadieron en la plantilla.

Si deseamos que siempre aparezcan las barras del scroll en lugar de overflow: auto añadiremos overflow: scroll Si el contenido no excede las medidas las barras quedan deshabilitadas, en el momento que es mayor el contenido de habilitan.

Guardamos los cambios de nuestra plantilla y escribimos nuestro texto de la siguiente forma:

<div id="scroll">
<p>Contenido del scroll </p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Podemos jugar un rato más con el scroll, y añadir una imagen de fondo en lugar de color con background:url('url_imagen');

Darle color a las fuentes con color:#308014;

Y si nos queda tiempo añadirle borde:

border-top: 2px solid #308014;
border-left: 2px solid #308014;
border-right: 2px solid #308014;
border-bottom: 2px solid #308014;

(Por cierto... esto es sólo una imagen )

Quedaría algo así:

#scroll {
width:400px;
height:200px;
overflow:auto;
color:#308014;
background:url('url_imagen');
border-top: 2px solid #308014;
border-left: 2px solid #308014;
border-right: 2px solid #308014;
border-bottom: 2px solid #308014;
}